<template>
  <section>
  	<div class="model">
  		<div class="pink">辅导申请</div>
  		<div class="row">
  			<div class="header"><span class="titlee">基本信息</span></div>
  			<div class="form">
  				<el-form ref="form" :model="form" label-width="76px">
  					<el-col :span="10">
  					  <el-form-item label="年级">
  					    <el-select v-model="gradeSelect" @change="getClassData()">
  					      <el-option v-for="(item, key) in gradeOption" :label="item"  :value="key"></el-option>
  					    </el-select>
  					  </el-form-item>
  					</el-col>
            <el-col :span="2">
              <div class="kong1"></div>
            </el-col>
  					<el-col :span="10">
  					  <el-form-item label="班级">
  					    <el-select v-model="classSelect" @change="getAllData()">
  					      <el-option v-for="(item, key) in classOption" :label="item" :value="item"></el-option>
  					    </el-select>
  					  </el-form-item>
  					</el-col>
            <el-col :span="10">
              <el-form-item label="姓名">
                <el-autocomplete
                  class="inline-input"
                  v-model="form.name"
                  :fetch-suggestions="querySearch"
                  @select="keyInput">
                </el-autocomplete>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <div class="kong1"></div>
            </el-col>
            <el-col :span="10">
              <el-form-item label="辅导类型">
                <el-select v-model="form.type">
                  <el-option v-for="(item, key) in typeArray" :label="item" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
  					<el-col :span="10">
  						<el-form-item label="辅导课程">
  							<el-input v-model="form.course"></el-input>
  						</el-form-item>
  					</el-col>
            <el-col :span="2">
              <div class="kong1"></div>
            </el-col>
  					<el-col :span="10">
  						<el-form-item label="辅导时间">
                <el-date-picker
                  format="yyyy-MM-dd"
                  ref="date"
                  @change="changeTime"
                  v-model="time"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
  						</el-form-item>
  					</el-col>
            <!-- <el-col :span="10">
              <el-form-item label="学生ID">
                <el-select v-model="gradeSelect" @change="getClassData()">
                  <el-option v-for="(item, key) in gradeOption" :label="item"  :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="辅导状态">
                <el-select v-model="classSelect">
                  <el-option v-for="(item, key) in classOption" :label="item" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
  					<el-col :span="20">
  						<el-form-item label="辅导情况">
  							<el-input type="textarea" v-model="form.situation" :rows="6"></el-input>
  						</el-form-item>
  					</el-col>
  					<el-col :span="10" :offset="9">
              <button class="btn btn-danger" @click='keepData'>保存</button>
  					</el-col>
            <div class="clear"></div>
  				</el-form>
  			</div>
  		</div>
  	</div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      total: 0,
      time: null,
      gradeSelect: null,
      gradeOption: [],
      classSelect: null,
      classOption: [],
      studentData: [],
      restaurants: [],
      typeArray: [],
      form: {
        name: null,
        course: null,
        time: null,
        situation: null,
        id: null,
        type: null
      }
    }
  },
  mounted () {
    this.getGradeData()
    this.getStudentData()
    this.getTypeData()
  },
  methods: {
    changeTime () {
      console.log(this.time)
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.indexOf(queryString.toLowerCase()) === 0)
      }
    },
    getTypeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'course/coach/type', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.ok) {
          this.typeArray = response.data.data
        }
      })
    },
    getStudentData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'studentInfo/listQuery', {grade: this.gradeSelect, clazz: this.classSelect + 1}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.total = response.data.data.total
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getAllData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'studentInfo/listQuery', {grade: this.gradeSelect, clazz: this.classSelect, rows: this.total}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.studentData = response.data.data.rows
          this.restaurants = this.studentData
          for (var i = 0; i < this.studentData.length; i++) {
            this.restaurants[i].value = this.studentData[i].name
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    keyInput () {
      if (this.studentData.length !== 0) {
        for (var i = 0; i < this.studentData.length; i++) {
          if (this.form.name === this.studentData[i].name) {
            this.form.id = this.studentData[i].id
          }
        }
      }
    },
    keepData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.form.time = this.$refs.date.displayValue
      this.$http.post(this._httpUrl + 'course/coach/addCoach', {studentId: this.form.id, studentName: this.form.name, grade: this.gradeSelect, clazz: this.classSelect, subject: this.form.course, coachTime: this.form.time, coachResult: this.form.situation, coachType: this.form.type}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getGradeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      this.classSelect = null
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/material-dashboard.css';
.kong1{
  padding: 10px;
}
.model{
	width: 98%;
	position: relative;
	background: #FFF;
	margin-left: 1%;
	margin-top: 60px;
	border-radius: 5px;
	padding-top: 10px;
  .clear{
    clear: both;
  }
	.pink{
		width: 104px;
		height: 64px;
		position: absolute;
		left: 3%;
		top: -20px;
		background: #E12C6C;
		border-radius: 4px;
		text-align: center;
		line-height: 70px;
		color: #fff;
	}
	.row{
		padding: 50px 10px 20px 11%;
		.header{
			border-bottom: 2px solid #D7D7D7;
			padding-bottom: 6px;
			.titlee{
				border-bottom: 2px solid #FB7862;
				padding-bottom: 10px;
				color: #FB7862;
			}
		}
		.form{
			padding: 30px 20px 20px 0;
		}
	}
}
</style>
